Custom Properties, könnt ihr mich hören?
Jod.
Jemand, was dagegen mich du sage?
Okay.
Rommageur Fans, wer hat von Custom Properties gehört?
Wer hat noch nicht gehört?
Was mit dem Rest?
Okay.
Ich mache am besten gleich mal was vor.
Was habe ich gewusst?
Okay.
Wir haben hier ein paar Boxen.
Und die sind noch ziemlich ungestylt.
Und die sollen jetzt die gleiche Rahmenfarbe bekommen.
Der Button soll die gleiche Farbe haben als Hintergrund und Schrift weiß.
Und der Link da drin, der soll auch die gleiche Farbe haben.
Also ran ans Werk.
Was brauchen wir?
Wir brauchen die Border Color.
Nehmen wir so.
Dann wollen wir dem die gleiche Farbe verpassen.
Okay.
Den Button, dem wollen wir die Hintergrundfarbe geben.
Passt.
Da müssen wir noch die Farbe setzen.
Fast fertig.
Mal gucken wie es aussieht.
Da sind wir jetzt.
Oh, hier sehen wir ziemlich gar nichts.
Hier der Fokus ist noch zu erkennen, der beim Button nicht.
Da müssen wir noch was tun.
Dann geben wir dem mal hier als Hintergrund.
Dann setzen wir mal weiß.
Und als Farbe unsere Farbe, die wir gewählt haben.
Ach, den Rahmen wollte ich eigentlich noch erhalten.
Warum ist der nicht? Egal.
Ihr seht, das ist ziemlich aufwendig, das zu machen.
Wenn wir jetzt die Farbe ändern wollen, müssen wir an sich stellen, wieder ran.
Und überall den gleichen Farbwert wieder ersetzen.
Ist irgendwie doof.
Was kann man tun?
Okay, probieren wir es mal.
Wir nehmen das gleiche nochmal, völlig ungestylt.
Da sind wir wieder.
Und wir schalten hier mal SAS an.
Geht bei CodePen schon einfach.
Auf dem Mac auch, andere Prozesse sollen damit aufwendiger sein.
Okay, was machen wir?
Okay.
Nennen wir?
Presenters
Gunnar Bittersmann
Zugänglich über
Offener Zugang
Dauer
00:44:15 Min
Aufnahmedatum
2018-09-12
Hochgeladen am
2018-09-12 17:41:23
Sprache
de-DE
Custom Properties – das sind CSS-Variablen, nicht wahr? Ja, sowas in der Art. Und nein, sie sind mehr als das.
Der Vortrag behandelt, was Custom Properties mit Variablen gemeinsam haben, wie wir sie aus CSS-Präprozessoren wie Sass kennen, und wie sie darüber hinausgehen. Wir werden sehen, wie sich Custom Properties ins CSS-Universum einfügen, mit Betonung auf dem C: the cascade.
Wir werden sehen, wie Custom Properties dabei helfen, DRY Code (don’t repeat yourself) zu schreiben. Wir werden anhand von Beispielen sehen, was man mit Custom Properties machen kann, was mit Variablen in Sass nicht geht.
Wir werden Jahrtausende zurück in der Zeit reisen und Quadratwurzeln wie die alten Babylonier berechnen – nur, dass wir es in CSS tun.
Warum? Weil wir’s können?
Nicht nur das, ich werde einen Anwendungsfall vorstellen, bei dem man beim Layouten tatsächlich Wurzeln ziehen muss.